<template>
    <div class="app-container">
        <el-form :model="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="员工id" prop="userid">
                <el-input v-model.trim="queryParams.userid" onkeyup="value=value.replace(/[^0-9.]/g,'')"
                    placeholder="请输入员工id" clearable style="width: 150px;" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="员工姓名" prop="nickname">
                <el-input v-model.trim="queryParams.nickname" placeholder="请输入员工姓名" clearable style="width: 150px;"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="收益类型" prop="options">
                <el-select v-model="queryParams.typeid" filterable placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收益时间">
                <!-- value-format="timestamp" -->
                <el-date-picker v-model.trim="queryParams.starttime" type="date" value-format="timestamp"
                    :picker-options="startDatePicker" placeholder="开始时间" style="width: 150px">
                </el-date-picker>
                <el-date-picker v-model.trim="endtimes" type="date" value-format="timestamp" :picker-options="endDatePicker"
                    placeholder="结束时间" style="width: 150px">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="员工id" align="center" prop="userid" />
            <el-table-column label="员工姓名" align="center" prop="nickname" />
            <el-table-column label="收益类型" align="center" prop="typename" />
            <el-table-column label="收益金额" align="center" prop="money" />
            <el-table-column label="收益时间" align="center" prop="newtime" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
    </div>
</template>
<script>
import { findAllUserMoney } from "@/api/puser/details.js";
export default {
    name:'Details',
    data() {
        return {
            endtimes: '',
            // 遮罩层
            loading: true,
            edit: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            userList: [],
            options: [{
                value: 1,
                label: '提成'
            }, {
                value: 2,
                label: '返利'
            }, {
                value: 3,
                label: '客资费'
            }, {
                value: 4,
                label: '退单'
            }, {
                value: 5,
                label: '分享收益'
            }, {
                value: 6,
                label: '内推提成（首推）'
            }, {
                value: 7,
                label: '内推提成（次推）'
            }, {
                value: 8,
                label: '客资提成'
            }, {
                value: 9,
                label: '订单提成'
            }, {
                value: 10,
                label: '内推客资返利'
            }, {
                value: 11,
                label: '内推订单返利'
            }, {
                value: 12,
                label: '客资扣费'
            }, {
                value: 13,
                label: '平台佣金'
            }, {
                value: 14,
                label: '取消订单'
            }, {
                value: 15,
                label: '客资费（首推）'
            }, {
                value: 16,
                label: ' 客资费（次推）'
            }],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                typeid: '',
                userid: '',
                nickname: '',
                starttime: '',
                endtime: '',
            },
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
        }
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            let res = await findAllUserMoney(this.queryParams);
            if (res.code == 200) {
                this.loading = false;
                this.userList = res.rows;
                this.total = res.total;
            }
        },
        // 搜索
        handleQuery() {
            if (this.queryParams.starttime == '' && this.endtimes == "") {
                findAllUserMoney(this.queryParams).then(res => {
                    this.userList = res.rows;
                    this.total = res.total;
                })
            } else if (this.queryParams.starttime == "" && this.endtimes != '') {
                this.$modal.msgError("请输入开始时间");
            } else if (this.queryParams.starttime != '' && this.endtimes == '') {
                this.$modal.msgError("请输入结束时间");
            } else if (this.queryParams.starttime != '' && this.endtimes != '' && this.queryParams.starttime > this.endtimes) {
                this.$modal.msgError("结束时间必须大于开始时间");
            } else if (this.queryParams.starttime != '' && this.endtimes != '' && this.queryParams.starttime < this.endtimes) {
                this.queryParams.endtime = this.endtimes + 24 * 60 * 60 * 1000 - 1;
                findAllUserMoney(this.queryParams).then(res => {
                    this.userList = res.rows;
                    this.total = res.total;
                })
            } else if (this.queryParams.startTime == this.queryParams.endTime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            }
        },
        // 搜索重置
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                typeid: '',
                userid: '',
                nickname: '',
                starttime: '',
                endtime: '',
            },
                this.endtimes = '';
            this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.userId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // 验证搜索框日期
        beginDate() {
            const self = this;
            return {
                disabledDate(time) {
                    //           debugger;
                    if (self.endtime) {
                        //如果结束时间不为空，则小于结束时间
                        return new Date(self.endtime).getTime() < time.gettime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        processDate() {
            const self = this;
            return {
                disabledDate(time) {
                    if (self.starttime) {
                        //如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.starttime).getTime() > time.gettime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
    },
}
</script>